<!--
 * @Descripttion:
 * @version: 1.0.0
 * @Author: htang
 * @Date: 2023-11-06 12:03:13
 * @LastEditors: htang
 * @LastEditTime: 2024-03-13 16:10:30
-->
<template>
  <div class="echarts-main jeecg-basic-table">
    <div class="tip">
      <span>今日报警统计</span>
      <span class="tip-img"></span>
    </div>
    <Bar :chartData="barData" :option="option" :height="'calc(100% - 60px)'" />
  </div>
</template>

<script>
import { ref, defineComponent, onMounted } from 'vue';
import { summaryEquipmentTypeApi } from '/@/api/data-statistics/index';
import { equipmentListApi } from '@/api/equipment';
import Bar from '/@/components/chart/Bar.vue';
import { useUserStore } from '/@/store/modules/user';
import moment from 'moment';
import * as echarts from 'echarts';
export default defineComponent({
  components: { Bar },
  setup(props) {
    const userStore = useUserStore();
    // 设备列表
    let equipmentList = [];

    let barData = ref([]);

    let option = ref({
      grid: {
        top: '5%',
        bottom: '5%',
        left: '2%',
        right: '2%',
        containLabel: true,
      },
      legend: {
        data: [],
      },
      xAxis: {
        type: 'category',
        data: [],
        axisLabel: {
          textStyle: {
            fontSize: 12, // 调整字体大小
          },
          formatter(value) {
            // 格式化标签
            return value.length > 5 ? value.substring(0, 5) + '...' : value;
          },
        },
      },
      series: [
        {
          type: 'bar',
          barWidth: '50%',
          itemStyle: {
            normal: {
              color(params) {
                let colorList = [
                  ['rgba(94, 210, 242, 1)', 'rgba(26, 148, 214, 1)'],
                  ['rgba(250, 145, 145, 1)', 'rgba(204, 41, 41, 1)'],
                  ['rgba(255, 195, 0, 1)', 'rgba(255, 141, 26, 1)'],
                  ['rgba(94, 210, 242, 1)', 'rgba(26, 148, 214, 1)'],
                ];
                let colorItem = colorList[params.dataIndex];
                return new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1, //y->y2
                  [
                    {
                      offset: 0,
                      color: colorItem[0],
                    },
                    {
                      offset: 1,
                      color: colorItem[1],
                    },
                  ],
                  false
                );
              },
            },
          },
        },
      ],
    });

    /**
     * 初始化设备列表
     */
    function initEquipmentList() {
      equipmentListApi({}).then((res) => {
        equipmentList = res;
      });
    }

    function init() {
      summaryEquipmentTypeApi().then((res) => {
        let equipmentType = userStore?.dictItems?.equipment_type;
        res.map((item) => {
          let name = equipmentType.find((_) => parseInt(_['value'], 10) == item['equipmentType'])?.label;
          option.value.legend.data.push(name);
          barData.value.push({
            name: name,
            value: item.count,
          });
        });
      });
    }

    onMounted(() => {
      // await initEquipmentList();
      init();
    });

    return {
      barData,
      option,
    };
  },
});
</script>

<style lang="less" scoped>
.echarts-main {
  width: 100%;
  height: 26vh;
  margin: 0 0 28px 0 !important;
  .tip {
    height: 40px;
    margin-bottom: 15px;
  }
}
</style>